<template>
  <div class="tax-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>税务报送数据管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计概览 -->
      <el-row :gutter="20" class="statistics-row">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon identity">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.identityCount }}</div>
                <div class="stat-label">身份信息</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon income">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.incomeCount }}</div>
                <div class="stat-label">收入信息</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon platform">
                <el-icon><OfficeBuilding /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.platformCount }}</div>
                <div class="stat-label">平台信息</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon total">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.totalCount }}</div>
                <div class="stat-label">总记录数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 管理模块标签页 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="management-tabs">
        <el-tab-pane label="身份信息管理" name="identity">
          <TaxIdentityManagement />
        </el-tab-pane>

        <el-tab-pane label="收入信息管理" name="income">
          <TaxIncomeManagement />
        </el-tab-pane>

        <el-tab-pane label="平台信息管理" name="platform">
          <TaxPlatformManagement />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, User, Money, OfficeBuilding, DataAnalysis } from '@element-plus/icons-vue'
import TaxIdentityManagement from './TaxIdentityManagement.vue'
import TaxIncomeManagement from './TaxIncomeManagement.vue'
import TaxPlatformManagement from './TaxPlatformManagement.vue'
import { taxManagementApi } from '../api'

// 响应式数据
const activeTab = ref('identity')
const statistics = ref({
  identityCount: 0,
  identitySuccess: 0,
  identityPending: 0,
  incomeCount: 0,
  incomeSuccess: 0,
  incomePending: 0,
  platformCount: 0,
  platformSuccess: 0,
  platformPending: 0,
  totalCount: 0,
  totalSuccess: 0,
  totalPending: 0
})

// 计算属性
const totalCount = computed(() =>
    statistics.value.identityCount + statistics.value.incomeCount + statistics.value.platformCount
)

const totalSuccess = computed(() =>
    statistics.value.identitySuccess + statistics.value.incomeSuccess + statistics.value.platformSuccess
)

const totalPending = computed(() =>
    statistics.value.identityPending + statistics.value.incomePending + statistics.value.platformPending
)

// 方法
const loadStatistics = async () => {
  try {
    // 并行加载三种数据的统计信息
    const [identityRes, incomeRes, platformRes] = await Promise.all([
      taxManagementApi.getIdentityList({ page: 1, size: 1 }),
      taxManagementApi.getIncomeList({ page: 1, size: 1 }),
      taxManagementApi.getPlatformList({ page: 1, size: 1 })
    ])

    // 更新统计数据
    if (identityRes.data.code === 200) {
      const data = identityRes.data.data
      statistics.value.identityCount = data.total || 0
      // 这里可以根据实际需求计算成功和待报送的数量
      statistics.value.identitySuccess = Math.floor(data.total * 0.7) || 0
      statistics.value.identityPending = Math.floor(data.total * 0.3) || 0
    }

    if (incomeRes.data.code === 200) {
      const data = incomeRes.data.data
      statistics.value.incomeCount = data.total || 0
      statistics.value.incomeSuccess = Math.floor(data.total * 0.6) || 0
      statistics.value.incomePending = Math.floor(data.total * 0.4) || 0
    }

    if (platformRes.data.code === 200) {
      const data = platformRes.data.data
      statistics.value.platformCount = data.total || 0
      statistics.value.platformSuccess = Math.floor(data.total * 0.8) || 0
      statistics.value.platformPending = Math.floor(data.total * 0.2) || 0
    }

    // 计算总计
    statistics.value.totalCount = totalCount.value
    statistics.value.totalSuccess = totalSuccess.value
    statistics.value.totalPending = totalPending.value

  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载统计数据失败')
  }
}

const refreshData = () => {
  loadStatistics()
  ElMessage.success('数据刷新成功')
}

const handleTabClick = (tab) => {
  console.log('切换到标签页:', tab.paneName)
  // 可以在这里添加标签页切换的逻辑
}

// 生命周期
onMounted(() => {
  loadStatistics()
})
</script>

<style scoped>
.tax-management {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.statistics-row {
  margin-bottom: 30px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.stat-icon.identity {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.income {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.platform {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.total {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-detail {
  font-size: 12px;
  color: #909399;
}

.stat-detail .success {
  color: #67c23a;
  font-weight: bold;
}

.stat-detail .pending {
  color: #e6a23c;
  font-weight: bold;
}

.management-tabs {
  margin-top: 20px;
}

.management-tabs .el-tabs__content {
  padding: 20px 0;
}
</style>
